import { FC } from 'react'
import {Button, ConfigProvider, Layout} from "antd";
const { Header, Content } = Layout;
import './index.scss'
import CardComponents from "../../components/workbenches/card";
import {cardComponentInterface} from '../../types/interface/common.interface'

const WorkbenchesComponent: FC = () => {
    // TODO 审批处理动态数据
    const approval_processing_array:Array<cardComponentInterface> = [
        {
            imageUrl:'待处理图片',
            text:'待处理',
            url:'待处理地址'
        },
        {
            imageUrl:'已处理图片',
            text:'已处理',
            url:'已处理地址'
        },
        {
            imageUrl:'已发起图片',
            text:'已发起',
            url:'已发起地址'
        },
        {
            imageUrl:'我收到的图片',
            text:'我收到的',
            url:'我收到的地址'
        },
    ]

    // TODO 我最常用动态数据
    const often_use_array:Array<cardComponentInterface> =[
        {
            imageUrl:'用户管理图片地址',
            text:'用户管理',
            url:'用户管理地址'
        },
    ]

    // TODO 跳转到公告详情
    const show_notice_detail = ()=>{
        console.log('跳转到公告详情')
    }

    return (
        <Layout className='workbenches-component'>
            <Header className='header'>
                工作台
            </Header>
            <Content className='content'>
                <p className='title'>创建以下对象，开始表单设计</p>
                <div className='create-process flex-evenly flex-item-center flex-warp'>
                    <div>
                        新建流程表单(图片)
                    </div>
                    <div>
                        新建普通表单(图片)
                    </div>
                </div>
                <p className='title'>审批处理</p>
                <div className='flex-center flex-no-warp'>
                    <div className='component-card flex-start flex-warp'>
                        {
                            approval_processing_array.map((item, index) => (
                                <CardComponents
                                    key={index}
                                    imageUrl={item.imageUrl}
                                    text={item.text}
                                    url={item.url}
                                />))
                        }
                    </div>
                </div>
                <p className='title'>最近/常用</p>
                <div className='flex-center flex-warp'>
                    <div className='component-card flex-start  flex-warp often-content' >
                        {
                            often_use_array.map((item, index) => (
                                <CardComponents
                                    key={index}
                                    imageUrl={item.imageUrl}
                                    text={item.text}
                                    url={item.url}
                                />))
                        }
                        <div className='notice'>
                            <span>通知公告：</span>
                            <span>【公告】</span>
                            <span>内容简要</span>
                            <span>2025-05-22 11：15</span>
                            <ConfigProvider
                                theme={{
                                    components: {
                                        Button: {
                                            contentFontSize: 24,
                                            defaultActiveBorderColor: '#fff',
                                            defaultActiveBg:'#fff',
                                            defaultHoverBorderColor: '#fff',
                                            defaultBorderColor: '#fff',
                                            groupBorderColor:'#fff',
                                            defaultColor: '#169BD5',
                                            defaultShadow: '0 0 0 rgba(255,255,255)'
                                        }
                                    },
                                }}
                            >
                                <Button variant="text" onClick={show_notice_detail}>
                                    查看
                                </Button>
                            </ConfigProvider>
                        </div>
                    </div>
                </div>
            </Content>
        </Layout>
    )
}

export default WorkbenchesComponent